<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文档区</el-breadcrumb-item>
      <el-breadcrumb-item>基础乐理</el-breadcrumb-item>
      <el-breadcrumb-item>节奏</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-alert title="节奏的定义:不同时值的音符搭配" type="info" show-icon :closable="false">
      </el-alert>
      <div>
        <el-tabs :tab-position="tabPosition" style="height: 100%;">
          <el-tab-pane label="节奏型">
            <div>
              <el-alert title="以下节奏型以四分音符为一拍,一拍画一个V" type="success" :closable="false"></el-alert>
              <div class="box_list">
                <div style="text-align: center;margin-bottom: 20px;">
                  <el-tag effect="dark" >简单拍子节奏型「一个V的时间内打完节奏」----(还有个三连音先不写)</el-tag>
                </div>
                <ul>
                  <li class="li_item" v-for="(item, i) in tempoArray" :key="item.id">
                    <img :src="item.tempoModeImg">
                    <i v-show="item.btnflag" class="play_btn" @click="play(i,item.audioName)"></i>
                    <i v-show="!item.btnflag" class="pause_btn" @click="play(i,item.audioName)"></i>
                    <p>「节奏型」:<span style="  font-size: 11px;">{{item.tempoMode}}</span></p>
                    <p><span>「手型」:</span><img :src="item.mode_v"></p>
                    <p><span>「速写」:</span><img :src="item.mode_f"></p>
                    <p><audio hidden="true" :id="item.audioName" loop="true" :src="item.audio" preload="none" controls="controls" type="audio/mp3"></audio></p>
                  </li>
                </ul>
                <div style="text-align: center;margin-bottom: 20px;">
                  <el-tag effect="dark" >复和拍子节奏型「两个V的时间内打完节奏」</el-tag>
                </div>
                <ul>
                  <li class="li_item" v-for="(sitem, si) in SecondtempoArray" :key="sitem.id">
                    <img :src="sitem.tempoModeImg">
                    <i v-show="sitem.btnflag" class="play_btn" @click="splay(si,sitem.audioName)"></i>
                    <i v-show="!sitem.btnflag" class="pause_btn" @click="splay(si,sitem.audioName)"></i>
                    <p>「节奏型」:<span style="  font-size: 11px;">{{sitem.tempoMode}}</span></p>
                    <p><span>「手型」:</span><img :src="sitem.mode_v"></p>
                    <p><span>「速写」:</span><img :src="sitem.mode_f"></p>
                    <p><audio hidden="true" :id="sitem.audioName" loop="true" :src="sitem.audio" preload="none" controls="controls" type="audio/mp3"></audio></p>
                  </li>
                </ul>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="练习"></el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>
<script>
import a from '../../assets/tempoMode/a.png'
import av from '../../assets/tempoMode/a_v.png'
import af from '../../assets/tempoMode/a_f.png'
import Aaudio from '../../assets/a.mp3'
import b from '../../assets/tempoMode/b.png'
import bv from '../../assets/tempoMode/b_v.png'
import bf from '../../assets/tempoMode/b_f.png'
import c from '../../assets/tempoMode/c.png'
import cv from '../../assets/tempoMode/c_v.png'
import cf from '../../assets/tempoMode/c_f.png'
import d from '../../assets/tempoMode/d.png'
import dv from '../../assets/tempoMode/d_v.png'
import df from '../../assets/tempoMode/d_f.png'
import e from '../../assets/tempoMode/e.png'
import ev from '../../assets/tempoMode/e_v.png'
import ef from '../../assets/tempoMode/e_f.png'
import f from '../../assets/tempoMode/f.png'
import fv from '../../assets/tempoMode/f_v.png'
import ff from '../../assets/tempoMode/f_f.png'
import g from '../../assets/tempoMode/g.png'
import gv from '../../assets/tempoMode/g_v.png'
import gf from '../../assets/tempoMode/g_f.png'
import h from '../../assets/tempoMode/h.png'
import hv from '../../assets/tempoMode/h_v.png'
import hf from '../../assets/tempoMode/h_f.png'
import i from '../../assets/tempoMode/i.png'
import iv from '../../assets/tempoMode/i_v.png'
import ifi from '../../assets/tempoMode/i_f.png'
import j from '../../assets/tempoMode/j.png'
import jv from '../../assets/tempoMode/j_v.png'
import jf from '../../assets/tempoMode/j_f.png'
import k from '../../assets/tempoMode/k.png'
import kv from '../../assets/tempoMode/k_v.png'
import kf from '../../assets/tempoMode/k_f.png'
import l from '../../assets/tempoMode/l.png'
import lv from '../../assets/tempoMode/l_v.png'
import lf from '../../assets/tempoMode/l_f.png'
import m from '../../assets/tempoMode/m.png'
import mv from '../../assets/tempoMode/m_v.png'
import mf from '../../assets/tempoMode/m_f.png'
import n from '../../assets/tempoMode/n.png'
import nv from '../../assets/tempoMode/n_v.png'
import nf from '../../assets/tempoMode/n_f.png'
import o from '../../assets/tempoMode/o.png'
import ov from '../../assets/tempoMode/o_v.png'
import of from '../../assets/tempoMode/o_f.png'
export default {
  data() {
    return {
      tabPosition: 'left',
      tempoArray: [{
        id: 1,
        tempoModeImg: a,
        btnflag: true,
        tempoMode: '二八',
        mode_v: av,
        mode_f: af,
        audio: Aaudio,
        audioName: 'one'
      },
      {
        id: 2,
        tempoModeImg: b,
        btnflag: true,
        tempoMode: '前八后十六',
        mode_v: bv,
        mode_f: bf,
        audio: Aaudio,
        audioName: 'two'
      },
      {
        id: 3,
        tempoModeImg: c,
        btnflag: true,
        tempoMode: '前十六后八',
        mode_v: cv,
        mode_f: cf,
        audio: Aaudio,
        audioName: 'three'
      },
      {
        id: 4,
        tempoModeImg: d,
        btnflag: true,
        tempoMode: '四个十六',
        mode_v: dv,
        mode_f: df,
        audio: Aaudio,
        audioName: 'four'
      },
      {
        id: 5,
        tempoModeImg: e,
        btnflag: true,
        tempoMode: '前小',
        mode_v: ev,
        mode_f: ef,
        audio: Aaudio,
        audioName: 'five'
      },
      {
        id: 6,
        tempoModeImg: f,
        btnflag: true,
        tempoMode: '后小',
        mode_v: fv,
        mode_f: ff,
        audio: Aaudio,
        audioName: 'six'
      },
      {
        id: 7,
        tempoModeImg: g,
        btnflag: true,
        tempoMode: '小切分',
        mode_v: gv,
        mode_f: gf,
        audio: Aaudio,
        audioName: 'seven'
      },
      {
        id: 8,
        tempoModeImg: h,
        btnflag: true,
        tempoMode: '四',
        mode_v: hv,
        mode_f: hf,
        audio: Aaudio,
        audioName: 'eight'
      }],
      SecondtempoArray: [{
        id: 21,
        tempoModeImg: i,
        btnflag: true,
        tempoMode: '附八',
        mode_v: iv,
        mode_f: ifi,
        audio: Aaudio,
        audioName: 'sone'
      },
      {
        id: 22,
        tempoModeImg: j,
        btnflag: true,
        tempoMode: '八附',
        mode_v: jv,
        mode_f: jf,
        audio: Aaudio,
        audioName: 'stwo'
      },
      {
        id: 23,
        tempoModeImg: k,
        btnflag: true,
        tempoMode: '八切八',
        mode_v: kv,
        mode_f: kf,
        audio: Aaudio,
        audioName: 'sthree'
      },
      {
        id: 24,
        tempoModeImg: l,
        btnflag: true,
        tempoMode: '八切十六',
        mode_v: lv,
        mode_f: lf,
        audio: Aaudio,
        audioName: 'sfour'
      },
      {
        id: 25,
        tempoModeImg: m,
        btnflag: true,
        tempoMode: '十六切八',
        mode_v: mv,
        mode_f: mf,
        audio: Aaudio,
        audioName: 'sfive'
      },
      {
        id: 26,
        tempoModeImg: n,
        btnflag: true,
        tempoMode: '十六切十六',
        mode_v: nv,
        mode_f: nf,
        audio: Aaudio,
        audioName: 'ssix'
      },
      {
        id: 27,
        tempoModeImg: o,
        btnflag: true,
        tempoMode: '二',
        mode_v: ov,
        mode_f: of,
        audio: Aaudio,
        audioName: 'sseven'
      }]
    }
  },
  methods: {
    play(i, myaudio) {
      const audio = document.getElementById(myaudio)
      this.tempoArray[i].btnflag = !this.tempoArray[i].btnflag
      if (audio.paused) {
        audio.play()
      } else {
        audio.pause()
      }
    },
    splay(i, myaudio) {
      const audio = document.getElementById(myaudio)
      this.SecondtempoArray[i].btnflag = !this.SecondtempoArray[i].btnflag
      if (audio.paused) {
        audio.play()
      } else {
        audio.pause()
      }
    }
  }
}

</script>
<style scoped>
.box_list {
  height: 614px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-top: 20px;
}

.li_item {
  height: 140px;
  width: 130px;
  padding: 0 0 20px 0;
  position: relative;
  z-index: 1;
  float: left;
  margin-left: 23px;
  margin-bottom: 14px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eaeefb;
  border-top: 3px solid #50bfff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.li_item p {
  margin: 0;
  font-size: 13px;
  text-align: center;
}

.li_item p img {
  width: 60px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
}

.li_item img {
  width: 100%;
  height: 48px;
  display: block;
}

.pause_btn {
  width: 50px;
  height: 50px;
  opacity: 0;
  transition: opacity .75s;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  background: url(../../assets/pause.png) right center no-repeat;
  background-size: 50px auto;
  border-radius: 50%
}

.play_btn {
  width: 50px;
  height: 50px;
  opacity: 0;
  transition: opacity .75s;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  background: url(../../assets/play.png) right center no-repeat;
  background-size: 50px auto;
  border-radius: 50%
}

.li_item:hover .pause_btn {
  opacity: 1;
  transition: opacity .75s
}

.li_item:hover .play_btn {
  opacity: 1;
  transition: opacity .75s
}

.li_item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}

.el-tag--success {
  margin: 0 8px;
}

.el-tab-pane {
  text-align: left;
  line-height: 38px;
  background-color: #f5f5f5
}

</style>
